After experimenting with the Spritekit-Scene-Editor in XCode it turned out that, when the SKTexture Color is black, setting the color in the SKSpriteNode with Blendfactor 1.0 and BlendNode "Alpha" has no effect. When the SKTextureColor is white it works as desired. The problem is that when I create the SKTexture programmatically from an UIImage which is based on a SF Symbols character it is ALWAYS black. No idea how to get it white: shuffleSymbolNode = SKSpriteNode(texture: shuffleTexture, color: .white , size: centerRect.size) shuffleSymbolNode!.blendMode = .alpha shuffleSymbolNode!.color = SKColor.white shuffleSymbolNode!.colorBlendFactor = 1.0 has NO effect - the SKSpriteNode is still black.

Hi! Here is a screenshot to show the situation. The green button with the "+"-Symbol is in the safe area of the Detail-Part of the splitview navigation. I have no idea why there is a safe area there. If I move the button down a certain amount of points it is clickable, but then it is too close to the top it is not clickable. MasterdataDetailView().ignoresSafeArea().contentShape(Rectangle()) Didn't work.

I've built a very rudimentary version of the NavigationSplitView with a button in the safe area of detail section. And it cannot be clicked - this is only when used in a NavigationSplitView. When I use the right, yellow view with the green button (TestView) directly like this: TestView().ignoreSafeArea() the button is at the upper edge of the screen and is clickable.

This is the code which produces the following screen: struct NavTestView: View { var body: some View { GeometryReader { p in VStack(spacing: 0) { NavigationSplitView { List(names) { Text($0.name).frame(width: p.size.width) .background(Color.green) }.listRowSpacing(p.size.height * 0.15 / 100 ) .toolbar(.hidden, for: .navigationBar) } detail: { TestView().ignoresSafeArea() }.frame(width: p.size.width, height: p.size.height, alignment: .topLeading) .background(Color.yellow) } } } } struct TestView: View { var body: some View { GeometryReader { p in let plusButton = IconButton(imageName: "plus.circle.fill", color: Color(uiColor: ThemeColor.SeaFoam.color), imageWidth: p.size.width * 5 / 100, buttonWidth: p.size.width * 5 / 100) let regularAddButton = Button(action: { log.info("| Regular Add Button pressed") } ) { plusButton } VStack { regularAddButton }.frame(width: p.size.width , height: p.size.height, alignment: .top) .background(Color.yellow) } } } I don't understand why there is a safearea in the yellow detail view. If I remove the.ignoreSafeArea() the button slips down a bit and is clickable. I guess this is a special thing with the NavigationSplitView

Here is the code which produces the screen shown above. I've replaced the "fancy" button with a regular text button, but the problem still persists. struct NavTestView: View { @State private var selection: TestView? var body: some View { GeometryReader { p in let plusButton = IconButton(imageName: "plus.circle.fill", color: Color.blue, imageWidth: p.size.width * 5 / 100, buttonWidth: p.size.width * 5 / 100) let regularAddButton = Button(action: { log.info("| Regular Add Button pressed") } ) { plusButton } VStack(spacing: 0) { VStack { regularAddButton }.frame(width: p.size.width , height: (p.size.height * 10 / 100) + p.safeAreaInsets.top , alignment: .top) .background(Color.brown) .ignoresSafeArea() NavigationSplitView { List(names) { n in NavigationLink { GeometryReader { inner in TestView(label: n.name).ignoresSafeArea() } } label: { Button(action: {} ) { Label(n.name, systemImage: "lasso") } } }.listRowSpacing(p.size.height * 0.15 / 100 ) .toolbar(.hidden, for: .automatic) } detail: { TestView(label: "No selection").ignoresSafeArea()//.frame(maxWidth: .infinity , maxHeight: .infinity) }.frame(width: p.size.width, height: p.size.height * 90 / 100 , alignment: .topLeading) .background(Color.yellow) } } } } struct TestView: View { var label: String var body: some View { GeometryReader { p in let plusButton = IconButton(imageName: "plus.circle.fill", color: Color(uiColor: ThemeColor.SeaFoam.color), imageWidth: p.size.width * 5 / 100, buttonWidth: p.size.width * 5 / 100) let regularAddButton = Button(action: { log.info("| Regular Add Button pressed") } ) { plusButton } VStack { Button(action: { } ) { Text("Click me!") } // regularAddButton Text(label) }.frame(width: p.size.width , height: p.size.height, alignment: .top) .background(Color.yellow) } } }

So this seems a mystery no one has an approach to how to solve it.